<template>
    <div class="cart-list-cont">
        <div class="cart-title">
            <p>订单编号：{{ tableinfo.order_sn }}</p>
            <p>创建时间：{{ tableinfo.createtime_text }}</p>
        </div>
        <div>
            <el-table :data="tableData" border style="width: 100%" 
             ref="multipleTable"
            :cell-style="{ 'text-align': 'center' }"
                :header-cell-style="{
                    'font-size': '.0833rem',
                    'text-align': 'center'
                }" >
                <el-table-column label="图片" width="180">
                    <template #default="scope">
                        <el-image style="width: .5208rem; height: .5208rem; border-radius: .0313rem;" :src="scope.row.goods_image" />
                    </template>
                </el-table-column>
                <el-table-column label="商品名称">
                    <template #default="scope">
                        <div class="text-cont">
                            {{ scope.row.goods_name }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品价格">
                    <template #default="scope">
                        <div class="text-cont">
                            {{ scope.row.goods_price * scope.row.goods_num }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品数量">
                    <template #default="scope">
                        <div class="text-cont">
                            {{ scope.row.goods_num }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品编号">
                    <template #default="scope">
                        <div class="text-cont">
                            {{ scope.row.goods_sn }}
                        </div>
                    </template>
                </el-table-column>

            </el-table>
        </div>
    </div>
</template>

<script setup>
import { nextTick, onUpdated, ref, watch } from 'vue';
const multipleTable=ref()
const props = defineProps(['tabledata'])
const tableData = ref([])
tableData.value = props.tabledata.order_goods
const tableinfo = ref({})
tableinfo.value = props.tabledata
watch(() => props.tabledata, (n) => {
    tableinfo.value = n
    tableData.value = n.order_goods
})
onUpdated(()=>{
    nextTick(()=>{
        multipleTable.value.doLayout();
    })
})
</script>

<style lang="scss" scoped>
.cart-list-cont {
    margin-bottom: .1042rem;
}

.cart-title {
    height: .2083rem;
    background: #3F7233;
    display: flex;
    align-items: center;
    padding-left: .2083rem;
    margin-bottom: .1563rem;

    >p {
        margin-right: .7656rem;
        font-size: .0833rem;
        font-weight: 400;
        color: #FFFFFF;
    }
}

.text-cont {
    font-size: .0938rem;
    font-weight: 400;
    color: #333333;
}
</style>